<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>

    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">


</head>
<body>

<jsp:include page="${APP_PATH}/common/head-blog.jsp"/>
<%--用户个人博客管理页面--%>
<c:choose>
    <c:when test="${not empty user}">
        <%--用户已登陆--%>
        <div class="mt-2 col-sm-12 col-md-12 col-lg-9" id="defaultDiv" data-id="${user.id}" style="margin-left: auto;margin-right: auto;">
            <div class="d-flex p-3 bg-white mb-2 rounded shadow-sm">
                <div class="flex-fill text-center"><a href="/blog-all" class="text-dark"><i class="fa fa-paper-plane"></i>文章管理</a></div>
                <div class="flex-fill text-center"><a href="/blog-type" class="text-dark"><i class="fa fa-table"></i>类别管理</a></div>
                <div class="flex-fill text-center"><a href="#" class="text-danger"><i class="fa fa-comments"></i>评论管理</a></div>
                <div class="flex-fill text-center"><a href="/blog-write" class="text-dark"><i class="fa fa-arrow-circle-right"></i>写文章</a></div>
            </div>
            <div class="bg-white p-3 rounded shadow-sm">
                <h6 class="border-bottom border-gray pb-2 mb-0">博客评论</h6>

                <div id="blogCommentArea">

                </div>

            </div>
            <div id="blogCommentPageNavArea">

            </div>
        </div>
    </c:when>
    <c:otherwise>
        <%--没有登录，提示用户--%>
        <div class="offset-lg-4 col-lg-4 col-md-12 col-sm-12">
            <div class="alert-warning p-3">
                <h4>您还没有登录，请先<a href="/login">登录</a></h4>
            </div>
        </div>
    </c:otherwise>
</c:choose>

<div class="p-4"></div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>
<script>
    function goToViewComment(ele) {
        var blogId = $(ele).attr("data-blogId");
        window.location.href='/blog/'+blogId;
    }

    //构建博客评论div
    function buildBlogComment(result) {
        var $blogCommentArea=$("#blogCommentArea");
        $blogCommentArea.empty();
        $.each(result.extend.pageInfo.list,function (index,item) {
            var $div_out = $("<div class='media text-muted pt-3'>");
            var $p=$("<p data-blogId='"+item.blogid+"' data-commentId='"+item.id+"' style='cursor:pointer' onclick='goToViewComment(this)' class='media-body pb-1 mb-0 small lh-125 border-bottom border-gray'>");
            var datetime = new Date(item.edittime).toLocaleString();
            var commentContent=""+item.comment;
            commentContent = commentContent.substring(0, 200);
            var $p_title=$("<p><strong><a class='text-dark' href='/blog/"+item.blogid+"'>"+item.fromusername+"</a><small class='ml-2'>"+datetime+"</small></strong></p>");

            //开始整合
            $div_out.append($p.append($p_title).append(commentContent)).appendTo($blogCommentArea);
        });
    }

    //构建博客评论分页条
    function buildBlogCommentPageNav(result) {
        var $blogCommentPageNavArea = $("#blogCommentPageNavArea");
        $blogCommentPageNavArea.empty();
        var div = $("<div class='p-2'>");
        var ul = $("<ul></ul>").addClass("pagination");
        //遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums,function(index,item){

            var numLi = $("<li class='page-item'></li>").append($("<a class='btn btn-sm btn-outline-primary mr-2'></a>").append(item));
            if(result.extend.pageInfo.pageNum === item){
                //当前页按钮，不可点击
                numLi.find("a").removeClass("btn-outline-primary");
                numLi.find("a").addClass("disabled");
                numLi.find("a").addClass("btn-primary");
            }
            numLi.click(function(){
                toPage(item);
            });
            ul.append(numLi);
        });
        div.append(ul).appendTo($blogCommentPageNavArea);
    }

    function toPage(pn) {
        //获取用户id
        var userId = $("#defaultDiv").attr("data-id");
        if (userId.length === 16) {
            $.ajax({
                url: '/getMyBlogComment/'+userId+"/"+pn,
                type: 'GET',
                success: function (result) {
                    if (result.code === 100) {
                        if (result.extend.pageInfo.list.length > 0) {
                            //博客评论数据不为空
                            buildBlogComment(result);
                            buildBlogCommentPageNav(result);
                        }else{
                            //评论数据为空，提示用户
                            $("<div class='alert-warning p-3 my-1'><h4>你的博客评论数据为空！！</h4></div>").appendTo($("#blogCommentArea"));
                        }
                    }else{
                        toastr.error("获取评论数据失败，请稍后重试！！");
                    }
                }
            });
        }
    }

    //获取博客评论
    $(function () {
        //默认展示第一页数据
        toPage(1);
    });
</script>

</body>

</html>
